<template>
  <div>
    <ul class="list" ref="A">
      <li v-for="(v, i) in list" :key="i" @click="add(i)" @touchmove="mouList($event)">{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "cityList",
  data() {
    return {};
  },
  props: ["list"],
  computed: {
    texts() {
      let arr = [];
      for (let i in this.list) {
        arr.push(i);
      }
      return arr;
    }
  },
  methods: {
    //点击字母事件
    add(i) {
      this.$emit("change", i);
    },

    //鼠标滑过字母事件
    mouList(e) {
      let num = parseInt(
        (e.targetTouches[0].clientY - this.$refs["A"].offsetTop) / 20
      );
      if (num >= 0 && num <= this.texts.length) {
        this.$emit("change", this.texts[num]);
        // console.log(this.texts);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list {
  position: absolute;
  top: 4rem;
  right: 0.35rem;
  color: darkcyan;
  font-weight: 600;
  font-size: 12px;
}
.list li {
  height: 0.4rem;
}
</style>
